import { defineConfig, presetIcons, transformerVariantGroup, transformerDirectives, presetWind3 } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
	presets: [
		presetWind3(),
		presetRemToPx(), // 转px
		presetIcons({
			scale: 1.2,
			warn: true,
			extraProperties: {
				display: 'inline-block',
				'vertical-align': 'middle'
			}
		})
	],
	transformers: [transformerVariantGroup(), transformerDirectives()],
	theme: {
		colors: {
			// === 语义化颜色系统 ===
			// 主品牌色
			brand: {
				lighter: 'var(--brand-1)', // 浅色背景
				light: 'var(--brand-2)', // 禁用文字
				soft: 'var(--brand-3)', // 一般禁用
				base: 'var(--brand-6)', // 常规（默认）
				intense: 'var(--brand-5)', // 悬浮
				strong: 'var(--brand-7)', // 激活/点击
				accent: 'var(--brand-4)', // 特殊场景
				DEFAULT: 'var(--brand-6)'
			},

			// 文字颜色（语义化）
			foreground: {
				primary: 'var(--text-1)', // 强调/正文标题
				secondary: 'var(--text-2)', // 次强调
				tertiary: 'var(--text-3)', // 次要信息
				disabled: 'var(--text-4)', // 禁用/置灰
				inverse: 'var(--text-5)', // 反色/白色
				DEFAULT: 'var(--text-1)'
			},

			// 背景颜色（语义化）
			background: {
				primary: '#FFFFFF', // 主背景
				secondary: 'var(--fill-1)', // 次级背景/禁用
				tertiary: 'var(--fill-2)', // 三级背景/白底悬浮
				quaternary: 'var(--fill-3)', // 四级背景/灰底悬浮
				overlay: 'var(--fill-4)', // 遮罩/特殊场景
				accent: 'var(--fill-5)', // 强调/图标背景
				DEFAULT: '#FFFFFF'
			},

			// 边框颜色（语义化）
			border: {
				subtle: 'var(--border-1)', // 微妙边框
				default: 'var(--border-2)', // 默认边框
				strong: 'var(--border-3)', // 强边框/悬浮
				intense: 'var(--border-4)', // 重边框/按钮描边
				DEFAULT: 'var(--border-2)'
			},

			// === 功能状态色 ===
			// 成功状态
			success: {
				lighter: 'var(--success-1)', // 浅色背景
				light: 'var(--success-2)', // 浅色
				soft: 'var(--success-3)', // 软色
				base: 'var(--success-6)', // 常规（默认）
				intense: 'var(--success-5)', // 悬浮
				strong: 'var(--success-7)', // 激活
				DEFAULT: 'var(--success-6)'
			},

			// 警告状态
			warning: {
				lighter: 'var(--warning-1)', // 浅色背景
				light: 'var(--warning-2)', // 浅色
				soft: 'var(--warning-3)', // 软色
				base: 'var(--warning-6)', // 常规（默认）
				intense: 'var(--warning-5)', // 悬浮
				strong: 'var(--warning-7)', // 激活
				DEFAULT: 'var(--warning-6)'
			},

			// 危险/错误状态
			danger: {
				lighter: 'var(--danger-1)', // 浅色背景
				light: 'var(--danger-2)', // 浅色
				soft: 'var(--danger-3)', // 软色
				base: 'var(--danger-6)', // 常规（默认）
				intense: 'var(--danger-5)', // 悬浮
				strong: 'var(--danger-7)', // 激活
				DEFAULT: 'var(--danger-6)'
			},

			// 信息状态（使用品牌色）
			info: {
				lighter: 'var(--brand-1)',
				light: 'var(--brand-2)',
				soft: 'var(--brand-3)',
				base: 'var(--brand-6)',
				intense: 'var(--brand-5)',
				strong: 'var(--brand-7)',
				DEFAULT: 'var(--brand-6)'
			},

			// === 设计点缀色 ===
			// 青蓝色
			cyan: {
				lighter: 'var(--cyan-1)',
				light: 'var(--cyan-2)',
				soft: 'var(--cyan-3)',
				base: 'var(--cyan-6)',
				intense: 'var(--cyan-5)',
				strong: 'var(--cyan-7)',
				DEFAULT: 'var(--cyan-6)'
			},

			// 金色
			gold: {
				lighter: 'var(--gold-1)',
				light: 'var(--gold-2)',
				soft: 'var(--gold-3)',
				base: 'var(--gold-6)',
				intense: 'var(--gold-5)',
				strong: 'var(--gold-7)',
				DEFAULT: 'var(--gold-6)'
			},

			// 柠檬绿
			lime: {
				lighter: 'var(--lime-1)',
				light: 'var(--lime-2)',
				soft: 'var(--lime-3)',
				base: 'var(--lime-6)',
				intense: 'var(--lime-5)',
				strong: 'var(--lime-7)',
				DEFAULT: 'var(--lime-6)'
			},

			// 紫色
			purple: {
				lighter: 'var(--purple-1)',
				light: 'var(--purple-2)',
				soft: 'var(--purple-3)',
				base: 'var(--purple-6)',
				intense: 'var(--purple-5)',
				strong: 'var(--purple-7)',
				DEFAULT: 'var(--purple-6)'
			},

			// 品红
			magenta: {
				lighter: 'var(--magenta-1)',
				light: 'var(--magenta-2)',
				soft: 'var(--magenta-3)',
				base: 'var(--magenta-6)',
				intense: 'var(--magenta-5)',
				strong: 'var(--magenta-7)',
				DEFAULT: 'var(--magenta-6)'
			}
		},
		// === 阴影系统 ===
		boxShadow: {
			// 下拉阴影
			dropdown: 'var(--shadow-dropdown-1)', // 一级下拉
			'dropdown-elevated': 'var(--shadow-dropdown-2)', // 二级下拉
			// 方向阴影
			left: 'var(--shadow-left)', // 左侧阴影
			right: 'var(--shadow-right)', // 右侧阴影
			down: 'var(--shadow-down)', // 下方阴影
			// 复合方向阴影
			'left-up': 'var(--shadow-left-up)',
			'left-down': 'var(--shadow-left-down)',
			'right-up': 'var(--shadow-right-up)',
			// 别名（兼容）
			'dropdown-1': 'var(--shadow-dropdown-1)',
			'dropdown-2': 'var(--shadow-dropdown-2)'
		},

		// === 尺寸系统 ===
		// 宽度
		width: {
			// 布局宽度
			sidebar: 'var(--nav-width)', // 侧边栏宽度
			modal: 'var(--dialog-w)', // 弹窗宽度
			// 兼容别名
			nav: 'var(--nav-width)',
			dialog: 'var(--dialog-w)'
		},

		// 高度
		height: {
			// 按钮高度
			'button-sm': 'var(--btn-h-sm)', // 小按钮
			'button-md': 'var(--btn-h-md)', // 中按钮
			'button-lg': 'var(--btn-h-lg)', // 大按钮
			// 表格高度
			'table-header': 'var(--table-th-h)', // 表头高度
			'table-row': 'var(--table-tr-h)', // 表格行高度
			'table-row-multi': 'var(--table-tr-2line-h)', // 多行表格
			// 弹窗高度
			modal: 'var(--dialog-h)', // 弹窗高度
			// 兼容别名
			'btn-sm': 'var(--btn-h-sm)',
			'btn-md': 'var(--btn-h-md)',
			'btn-lg': 'var(--btn-h-lg)',
			dialog: 'var(--dialog-h)',
			'table-th': 'var(--table-th-h)',
			'table-tr': 'var(--table-tr-h)',
			'table-tr-2': 'var(--table-tr-2line-h)'
		}
	},
	// === 语义化规则 ===
	rules: [
		// 按钮尺寸规则
		['button-sm', { height: 'var(--btn-h-sm)' }],
		['button-md', { height: 'var(--btn-h-md)' }],
		['button-lg', { height: 'var(--btn-h-lg)' }],

		// 表格规则
		['table-header', { height: 'var(--table-th-h)' }],
		['table-row', { height: 'var(--table-tr-h)' }],
		['table-row-multi', { height: 'var(--table-tr-2line-h)' }],

		// 布局规则
		['sidebar-width', { width: 'var(--nav-width)' }],
		[
			'modal-size',
			{
				width: 'var(--dialog-w)',
				height: 'var(--dialog-h)'
			}
		],

		// 兼容性规则（保持向下兼容）
		['btn-sm', { height: 'var(--btn-h-sm)' }],
		['btn-md', { height: 'var(--btn-h-md)' }],
		['btn-lg', { height: 'var(--btn-h-lg)' }],
		['table-th', { height: 'var(--table-th-h)' }],
		['table-tr', { height: 'var(--table-tr-h)' }],
		['table-tr-2', { height: 'var(--table-tr-2line-h)' }],
		['nav-width', { width: 'var(--nav-width)' }],
		[
			'dialog-size',
			{
				width: 'var(--dialog-w)',
				height: 'var(--dialog-h)'
			}
		]
	],
	// === 语义化快捷方式 ===
	shortcuts: {
		// === 文字颜色快捷方式 ===
		'text-primary': 'text-foreground-primary', // 主要文字
		'text-secondary': 'text-foreground-secondary', // 次要文字
		'text-tertiary': 'text-foreground-tertiary', // 第三级文字
		'text-disabled': 'text-foreground-disabled', // 禁用文字
		'text-inverse': 'text-foreground-inverse', // 反色文字
		'text-white': 'text-foreground-inverse', // 白色文字别名

		// === 背景颜色快捷方式 ===
		'bg-primary': 'bg-background-primary', // 主背景
		'bg-secondary': 'bg-background-secondary', // 次背景
		'bg-tertiary': 'bg-background-tertiary', // 三级背景
		'bg-quaternary': 'bg-background-quaternary', // 四级背景
		'bg-overlay': 'bg-background-overlay', // 遮罩背景
		'bg-accent': 'bg-background-accent', // 强调背景

		// === 边框快捷方式 ===
		'border-subtle': 'border border-subtle', // 微妙边框
		'border-default': 'border border-default', // 默认边框
		'border-strong': 'border border-strong', // 强边框
		'border-intense': 'border border-intense', // 重边框

		// === 品牌色快捷方式 ===
		'bg-brand': 'bg-brand-base', // 品牌色背景
		'bg-brand-hover': 'bg-brand-intense', // 品牌色悬浮
		'bg-brand-active': 'bg-brand-strong', // 品牌色激活
		'text-brand': 'text-brand-base', // 品牌色文字

		// === 状态颜色快捷方式 ===
		// 成功状态
		'text-success': 'text-success-base',
		'bg-success': 'bg-success-base',
		'bg-success-light': 'bg-success-lighter',
		'border-success': 'border border-success-base',

		// 警告状态
		'text-warning': 'text-warning-base',
		'bg-warning': 'bg-warning-base',
		'bg-warning-light': 'bg-warning-lighter',
		'border-warning': 'border border-warning-base',

		// 错误/危险状态
		'text-danger': 'text-danger-base',
		'bg-danger': 'bg-danger-base',
		'bg-danger-light': 'bg-danger-lighter',
		'border-danger': 'border border-danger-base',

		// 信息状态
		'text-info': 'text-info-base',
		'bg-info': 'bg-info-base',
		'bg-info-light': 'bg-info-lighter',
		'border-info': 'border border-info-base',

		// === 按钮组合快捷方式 ===
		// 主要按钮
		'button-primary': 'bg-brand-base text-foreground-inverse hover:bg-brand-intense active:bg-brand-strong transition-colors',
		'button-primary-sm': 'button-primary h-button-sm px-3 text-sm rounded',
		'button-primary-md': 'button-primary h-button-md px-4 text-base rounded',
		'button-primary-lg': 'button-primary h-button-lg px-6 text-lg rounded',

		// 次要按钮
		'button-secondary':
			'bg-background-tertiary text-foreground-secondary hover:bg-background-quaternary border-default transition-colors',
		'button-secondary-sm': 'button-secondary h-button-sm px-3 text-sm rounded',
		'button-secondary-md': 'button-secondary h-button-md px-4 text-base rounded',
		'button-secondary-lg': 'button-secondary h-button-lg px-6 text-lg rounded',

		// 状态按钮
		'button-success':
			'bg-success-base text-foreground-inverse hover:bg-success-intense active:bg-success-strong transition-colors',
		'button-warning':
			'bg-warning-base text-foreground-inverse hover:bg-warning-intense active:bg-warning-strong transition-colors',
		'button-danger': 'bg-danger-base text-foreground-inverse hover:bg-danger-intense active:bg-danger-strong transition-colors',

		// === 表格组件
		'table-tag': 'px-2.5 w-fit font-500 flex items-center justify-center text-xs rounded-[100px]',

		// === 兼容性快捷方式（保持向下兼容）===
		'bg-light': 'bg-background-secondary', // 兼容: bg-fill-1
		'bg-normal': 'bg-background-tertiary', // 兼容: bg-fill-2
		'border-light': 'border border-subtle', // 兼容: border-1
		'border-normal': 'border border-default', // 兼容: border-2
		'btn-primary': 'button-primary-md', // 兼容: 旧按钮风格
		'btn-secondary': 'button-secondary-md', // 兼容: 旧按钮风格
		'btn-success': 'button-success h-button-md px-4 rounded',
		'btn-warning': 'button-warning h-button-md px-4 rounded',
		'btn-danger': 'button-danger h-button-md px-4 rounded'
	}
})
